<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<style type="text/css">
.user-panel{
    white-space: nowrap;
    overflow: hidden;
}
.user-panel{position: relative;width: 100%;padding: 10px;overflow: hidden;border-bottom: 1px solid #187fc4;}
.user-panel:before,
.user-panel:after{content: " ";display: table;}
.user-panel:after{clear: both;}
.user-panel > .image > img{width: 100%;max-width: 45px;height: auto;}
.user-panel > .info{padding: 5px 5px 5px 15px;line-height: 1;left: 55px;top:0px;}
.user-panel > .info > p{font-weight: 600;margin-bottom: 2px;margin-top: 2px;color: #fff;cursor: pointer;}
.user-panel > .info a{color: #fff;text-decoration: none;padding-right: 5px;margin-top: 3px;font-size: 11px;}
.user-panel > .info a > .fa,
.user-panel > .info a > .ion,
.user-panel > .info a > .glyphicon{margin-right: 5px;}
.user-panel > .info a.pull-right{margin-right: 5px;}
#sidebar{top: -55px;
	height: calc(100vh);
    overflow: auto;}
.nav-list>li{
    border-top: 1px solid #F0F8FF;
   border-bottom: 1px solid #F0F8FF;
   border-color: #F0F8FF !important;
}


.skin-1 .nav-list>li>a {
    color: #b6fc2a;
    background-color: #2598c1;
}

.skin-1 .nav-list>li>.nav-list>li>a {
    color: #000000;
    background-color: #F0F8FF;
}
.skin-1 .nav-list>li.open>a, .skin-1 .nav-list>li>a:hover, .skin-1 .nav-list>li.open>a:hover {
    color: #000000;
    background-color: #6fb3e0;
   border-color: #187fc4 !important;
}
.skin-1 .nav-list>li>ul.submenu{
    background-color: #F0F8FF;
    border-top-color: #187fc4;
}
.skin-1 .nav-list>li.open>a>.arrow {
    color: #FFF;
    font-size: 14px;
    font-family: 'Open Sans';
}
.skin-1 .nav-list>li>a:hover .arrow {
    color: #FFF;
}
.submenu2>li>a{
color: #000 !important;
}
.submenu2>li{
	background: url(${pageContext.request.contextPath}/resource/images/menu_span_bg.png) 3px -5px no-repeat ;
	padding-left: 20px;
}
.submenu2>li.active{
	background: url(${pageContext.request.contextPath}/resource/images/menu_span_bg.png) 3px -65px no-repeat ;
	padding-left: 20px;
}
.menu_enabled>a>i{
	background: url(${pageContext.request.contextPath}/resource/images/menu_span_bg.png) 8px -10px no-repeat ;
	padding-left: 20px;
}
.menu_enabled>a>i.icon-desktop:before {
    content: none;
}

    .nav-list>li>.submenu>li:last-child>a {
        border-bottom: 1px dotted #5a6364;
}
</style>
<div id="sidebar" class="" style="overflow: hidden;">
	<div class="user-panel" style="padding: 0px">
		<img src="${pageContext.request.contextPath}/resource/images/index/left1.png" class="img-circle" 
		style="width: 189px;height: 95px;border-radius: 0px"/>
        
     </div>
     <div style="overflow: auto;width: 189px;height: calc(100vh - 95px)" >
	<ul class="nav nav-list" style="margin-top: 0px;" id="left_nav-list" >
	
	 <c:forEach items="${models}" var="model">
		<li class="top-menu-item" id="head_menu_${model.modelId}" >
			<a title="" href="javascript:;" class="dropdown-toggle"><i class="icon ${model.modelIcon}"></i>  
			<span class="text" style="font-size: 14px;font-weight: bold;">${model.name}</span> <b class="arrow icon-angle-down"></b></a>
			<ul class="nav nav-list submenu">
				<c:set var="menu_number" value="0"></c:set>
				<c:forEach items="${menuList}" var="menu">
					<c:if test="${menu.modelId eq model.modelId }">
						<c:set var="menu_number" value="${menu_number+1}"></c:set>
						<c:set var="tClass" value=""></c:set>
						<c:if test="${empty menu.subMenu}">
						<c:set var="tClass" value="menu_enabled"></c:set>
						</c:if>
						<li id="lm${menu.menuId}" class="menuLi ${tClass}" menuType="${menu.modelId}" >
						
						<c:choose>
							<c:when test="${not empty menu.menuUrl}">
								<a href="javascript:void(0);" style="margin-left:15px;cursor:pointer;line-height: 20px;color: #000000;"
								onclick="siMenu('z${menu.menuId}','lm${menu.menuId}','${menu.menuName }','${pageContext.request.contextPath}${menu.menuUrl }')"> <i
								class="${menu.menuIcon == null ? 'icon-desktop' : menu.menuIcon}" style="display: block;"></i>
								<span>${menu.menuName }</span>
							</c:when>
							<c:otherwise>
								<a  href="javascript:void(0);" style="margin-left:15px;cursor:pointer;line-height: 20px;color: #000000"> <i
								class="${menu.menuIcon == null ? 'icon-desktop' : menu.menuIcon}"  style="display: block;"></i>
								<span>${menu.menuName }</span>
							</c:otherwise>
						</c:choose>
						</a>
							<ul class="submenu2" style="list-style: none">
								<c:forEach items="${menu.subMenu}" var="sub">
									<c:choose>
										<c:when test="${not empty sub.menuUrl}">
											<li id="z${sub.menuId }" style="margin: 3px 0px"><a style="cursor:pointer;"
												target="mainFrame"
												href="javascript:void(0);"
												onclick="siMenu('z${sub.menuId}','lm${sub.menuId}','${sub.menuName }','${pageContext.request.contextPath}${sub.menuUrl }')"><i
													class="" title="${sub.menuName }"></i>${sub.menuName }</a></li>
										</c:when>
										<c:otherwise>
											<li  style="margin: 3px 0px"><a href="javascript:void(0);" style="color: #000000" title="${sub.menuName }"><i
													class=""></i>${sub.menuName }</a></li>
										</c:otherwise>
									</c:choose>
								</c:forEach>
							</ul></li>
					</c:if>
				</c:forEach>
				
			</ul>
			<c:if test="${menu_number eq 0 }">
				<script type="text/javascript">
					$("#head_menu_${model.modelId}").css("display","none");
				</script>
				</c:if>
		</li>
  	</c:forEach>
	</ul>
    </div>
</div>
<script type="text/javascript">
$(function(){
	$(".submenu2 li").bind("click",function(){
		$(".submenu2 li").removeClass("active");
		$(this).addClass("active");
	});
});
</script>
